<template>
    <div class="zs-card-with-header">
        <div class="zs-card-header">
            <i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
            <div class="zs-title">招商指标</div>
            <div class="zs-layout-grow zs-layout-flex-row zs-layout-justify-end zs-layout-items-center">
                <el-button class="zs-link" link size="small"
                    v-btnPermi="{ permi: props.btnPermiList[0] }" @click="goDetail">明细</el-button>
                <el-divider direction="vertical" />
                <el-button class="zs-link" link size="small"
                    v-btnPermi="{ permi: props.btnPermiList[1] }" @click="openFormDrawer">预测</el-button>
            </div>
        </div>
        <div class="zs-card-content">
            <div class="zs-layout-flex-row zs-layout-justify-between">
                <template v-for="(item, index) in grayCardList" :key="index">
                    <GrayCard class="zs-layout-grow" :class="{ 'zs-space-right': index < grayCardList.length - 1 }"
                        :isBlueCard="true" :list="item.list" :title="item.title"></GrayCard>
                </template>
            </div>
            <el-table :data="tableData" :span-method="objectSpanMethod" :cell-class-name="getCellClassName"
                :header-cell-style="getHeaderCellStyle">
                <el-table-column prop="groupName" label="指标" width="80" :align="'left'" />
                <el-table-column prop="name" label="" :align="'left'" width="140" class-name="db-table-cell-border-right" />
                <el-table-column prop="1" label="1月" :align="'right'" />
                <el-table-column prop="2" label="2月" :align="'right'" />
                <el-table-column prop="3" label="3月" :align="'right'" />
                <el-table-column prop="4" label="4月" :align="'right'" />
                <el-table-column prop="5" label="5月" :align="'right'" />
                <el-table-column prop="6" label="6月" :align="'right'" />
                <el-table-column prop="7" label="7月" :align="'right'" />
                <el-table-column prop="8" label="8月" :align="'right'" />
                <el-table-column prop="9" label="9月" :align="'right'" />
                <el-table-column prop="10" label="10月" :align="'right'" />
                <el-table-column prop="11" label="11月" :align="'right'" />
                <el-table-column prop="12" label="12月" :align="'right'" />
                <el-table-column prop="total" label="合计" :align="'right'" />
            </el-table>
            <div class="zs-text-sm zs-space-top zs-layout-flex-row zs-layout-justify-between">
                <span class="zs-text-gray-dark">{{ unit }}</span>
                <span class="zs-text-gray">数据截止：{{ date }}</span>
            </div>
        </div>
        <BusinessPredictionFormDialog v-if="isShowDrawer" :isShow="isShowDrawer" :biProjectCode="biProjectCode"
            :yearmonth="yearmonth" :preType="'zs'" @close="closeFormDrawer"></BusinessPredictionFormDialog>
    </div>
</template>
<script setup>
import digitalMonthlyReportApi from '@/api/Manage/Business/digitalMonthlyReport';
import BusinessPredictionFormDialog from '@/views/Manage/Business/DigitalMonthlyReport/dialog/businessPredictionFormDialog';
import { ref, watch } from 'vue';
import GrayCard from '@/DbUiComponents/grayCard'
import { dateFormat } from '@/utils/number-util'
import { useRouter } from 'vue-router';
const router = useRouter();

const props = defineProps({
    btnPermiList: {
        type: Array,
        required: true,
        default: () => { return [] }
    },
    isFresh: {
        type: String,
        required: false,
        default: ''
    },
    biProjectCode: {
        type: String,
        required: false,
        default: ''
    },
    yearmonth: {
        type: String,
        required: false,
        default: ''
    },
    tabPermi: {
        type: String,
        required: false,
        default: ''
    },
})


const isShowDrawer = ref(false)
const openFormDrawer = () => {
    isShowDrawer.value = true
}
const closeFormDrawer = (data) => {
    isShowDrawer.value = data.isShow
    getData()
}

// const grayCardList = ref([
//     {
//         title: '1-6月收入',
//         list: [
//             { label: '预算', value: '7010', isThousand: true, unit: '', color: '1', des: '' },
//             { label: '实际', value: '7790', unit: '', color: '' },
//             { label: '完成率', value: '112', unit: '%', color: '' },
//             { label: '完成率', value: '112', unit: '%', color: '' },
//         ]
//     },
//     {
//         title: '1-6月收入',
//         list: [{ label: '预算', value: '7,010', unit: '%', color: '1', des: '' }, { label: '实际', value: '7,790', unit: '', color: '' }, { label: '完成率', value: '112', unit: '%', color: '' }]
//     },
//     {
//         title: '1-6月收入',
//         list: [{ label: '预算', value: '7,010', unit: '%', color: '1', des: '' }, { label: '实际', value: '7,790', unit: '', color: '' }, { label: '完成率', value: '112', unit: '%', color: '' }]
//     }
// ])

const unit = ref()
const date = ref()
const grayCardList = ref([])
const tableData = ref([])

// 当前月份
const curMonth = ref()
const initData = (yearmonth) => {
    let month = yearmonth.split('-')[1]
    month[0] == 0 ? month = month.substring(1, 2) : ''
    curMonth.value = month
}

// { row, column, rowIndex, columnIndex }
const getCellClassName = ({ row, column, columnIndex }) => {
    if (columnIndex == 0) {
        return 'zs-table-cell-border-right'
    }
    if (columnIndex - 1 > curMonth.value && column.label != '合计') {
        return 'zs-text-gray-ccc'
    }
    if (row[`${column.property}Color`] == 1) {
        return 'zs-text-red'
    }
}

const getHeaderCellStyle = ({ column, columnIndex }) => {
    if (columnIndex - 1 > curMonth.value && column.label != '合计') {
        return { color: '#999999' }
    }
}

const objectSpanMethod = ({
    row,
    columnIndex,
}) => {
    if (columnIndex === 0) {
        if (row.isGroup) {
            return {
                rowspan: row.groupNum,
                colspan: 1,
            }
        } else {
            return {
                rowspan: 0,
                colspan: 0,
            }
        }
    }
}


const getData = () => {
    digitalMonthlyReportApi.investmentTargetApi({ dataTime: props.yearmonth, projectCode: props.biProjectCode }).then(res => {
        if (res.data.code == 200) {
            unit.value = res.data.data.unit
            date.value = res.data.data.date
            grayCardList.value = res.data.data.card
            const list = res.data.data.table
            const tableList = []
            list.map(item => {
                item.child.map((child, index) => {
                    if (index == 0) {
                        child.isGroup = true
                        child.groupNum = item.child.length
                    }
                    child.groupName = item.groupName
                    tableList.push(child)
                })
            })
            tableData.value = tableList
        }
    });
}

watch(() => { props.isFresh }, () => {
    initData(props.yearmonth)
    getData()
}, { deep: true, immediate: true });


// 获取某个月份最后一天
function getLastDayOfMonth(yearmonth) {
    const year = new Date(yearmonth).getFullYear()
    const month = new Date(yearmonth).getMonth() + 1
    // 获取指定年月的下一个月的第一天
    let nextMonthFirstDay = new Date(year, month, 1);
    // 将下一个月的第一天往前推一天，即为当前月份的最后一天
    let lastDay = new Date(nextMonthFirstDay.getTime() - 86400000);
    return dateFormat(lastDay, 'YYYY-MM-DD');
}

const goDetail = () => {
    router.push({
        path: '/page/routeController/index',
        query: {
            rid: 'Manage/Business/DigitalMonthlyReport/BusinessIndexDetail',
            rTitle: '出租',
            tabPermi: props.tabPermi,
            biProjectCode: props.biProjectCode,
            updateDate: getLastDayOfMonth(props.yearmonth),
        },
    })
}


</script>

<style scoped lang="scss"></style>
